<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="${contextPath}/css/bootstrap.min.css">
<script src="${contextPath}/js/tools.js"></script>
<link type="text/css"
	href="${contextPath}/datetimer/css/jquery-ui-1.8.17.custom.css"
	rel="stylesheet" />
<link type="text/css"
	href="${contextPath}/datetimer/css/jquery-ui-timepicker-addon.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-ui-timepicker-zh-CN.js"></script>
<script type="text/javascript">
	$(function() {
		$(".ui_timepicker").datetimepicker({
			//showOn : "button",
			//buttonImage : "${contextPath}/datetimer/css/images/icon_calendar.gif",
			//buttonImageOnly: true,
			showSecond : true,
			timeFormat : 'hh:mm:ss',
			stepHour : 1,
			stepMinute : 1,
			stepSecond : 1
		})
	})
</script>

<style type="text/css">
body {
	margin: 5px;
	font-size: 14px;
	padding: 0px;
	background-color: #A2A9B4;
	font-family: 'Microsoft YaHei';
}

.tips {
	color: #f00;
	font-size: 95%;
}

.col-center-block {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.number-search-input {
	padding-right: 20px;
	background: url("${contextPath}/images/search_icon.png") no-repeat
		scroll right center transparent;
}

.time-search-input {
	padding-right: 15px;
	background: url("${contextPath}/images/calendar_icon.png") no-repeat
		scroll right center transparent;
}

.panel-padding-top {
	margin-top: 2px;
	border: 0px;
	background-color: #fff;
	border-radius: 4px;
}

.panel-padding-bottom {
	margin-bottom: 4px;
}

.td-padding-bottom {
	margin-bottom: 0px;
}

.td {
	vertical-align: middle !important;
	text-align: left;
	font-size: 14px;
	font-family: 'Microsoft YaHei';
}

._btn {
	background-color: #5BD2AA;
	border: 0px;
}

._btn:hover {
	background-color: #ADE9D5;
	border: 0px;
}

._btn:focus {
	background-color: #5BD2AA;
	border: 0px;
	outline: none;
}

._btn:active {
	background-color: #5BD2AA;
	border: 0px;
}

.btn-primary:active {
	background-color: #5BD2AA !important;
	border: 0px;
	box-shadow: 0px 0px 0px #5BD2AA;
}

.footer {
	text-align: center;
	vertical-align: middle;
}

.font {
	font-size: 14px;
	font-family: 'Microsoft YaHei';
	font-weight: bold;
}

.font1 {
	font-size: 14px;
	font-family: 'Microsoft YaHei';
	font-weight: normal;
}

.pagination {
	vertical-align: middle;
}
.pagination li a {
	cursor: pointer;
}
</style>
</head>
<body onload="javascript:onloadPage(0,0,0)">

	<div class="panel panel-primary panel-padding-top panel-padding-bottom">
		<!-- <div class="panel-heading">
			<h2 class="panel-title">搜索</h2>
		</div> -->
		<div class="panel-body">

			<form class="form-inline">
				<div class="form-group">
					<label class="font">锁编号 </label> <input type="text" id="device_no"
						class="form-control number-search-input font1" name="device_no"
						placeholder="请输入编号">&nbsp;&nbsp; <label for="name"
						class="font">刷新时间&nbsp;</label> &nbsp;<input type="text"
						id="device_time1_s" name="device_time1_s"
						class="ui_timepicker form-control time-search-input font1"
						readonly="readonly">&nbsp;~&nbsp; <input type="text"
						id="device_time2_s" name="device_time2_s"
						class="ui_timepicker form-control time-search-input font1"
						readonly="readonly"> &nbsp; <input type="button"
						onclick="javascript:query()" class="btn btn-primary _btn"
						value="查找"> &nbsp; <input type="button"
						onclick="javascript:reset()" class="btn btn-primary _btn"
						value="重置">

				</div>
			</form>
		</div>
	</div>
	<div class="panel-padding-top td-padding-bottom font">
		<div id="content"></div>
		<nav id="footer" class="footer"></nav>
	</div>




	<script type="text/javascript">
		var showLimit = 5;
		function onloadPage(no, size, max) {

			//alert("no" + no);
			if (no <= 0)
				no = 1;
			if (max != 0 && no > max)
				no = max;
			var data = {
				page_no : no,
				page_size : size,
				device_no : $("#device_no").val(),
				time1 : $("#device_time1_s").val(),
				time2 : $("#device_time2_s").val()
			};

			$.ajax({
				url : "${contextPath}/service/device/listDeviceLogPaging.lt",
				timeout : 30000,
				dataType : "json",
				data : data,
				type : "get",
				success : function(data) {
					showData(data);
				},
				error : function(req, msg, err) {
				}
			});
		}

		function query() {
			onloadPage(0, 0, 0);
		}

		function showData(data) {
			var html = "<table class='table table-hover table-condensed td'>"
					+ "<thead>" + "<tr class='font'>" + "<td>ID</td>" + "<td>锁编号</td>"
					+ "<td>开/关锁状态</td>" + "<td>充电状态</td>" + "<td>故障状态</td>"
					+ "<td>剩余电量</td>" + "<td>当前经纬度</td>" + "<td>温度</td>"
					+ "<td>电源电压</td>" + "<td>充电电流</td>" + "<td>电池电压</td>"
					+ "<td>创建时间</td>" + "</tr>" + "</thead>" + "<tbody>";
			var result = eval(data);
			var response = result.list;
			for (i = 0; i < response.length; i++) {
				var entity = response[i];
				html += "<tr>" + "<td>" + entity.id + "</td>" + "<td>"
						+ entity.device_no + "</td>" + "<td>"
						+ lockStatusShow(entity.lock_status) + "</td>" + "<td>"
						+ chargeStatusShow(entity.charge) + "</td>" + "<td>"
						+ modeShow(entity.mode) + "</td>" + "<td>"
						+ entity.battery_stat + "</td>" + "<td>"
						+ entity.longitude + "," + entity.latitude + "</td>"
						+ "<td>" + entity.temperature + "</td>" + "<td>"
						+ vBusShow(entity.charge,entity.vbus) + "</td>" + "<td>" + entity.icharge
						+ "</td>" + "<td>" + entity.vbattery + "</td>" + "<td>"
						+ timeStamp2String(entity.create_date) + "</td>"
						+ "</tr>";
			}

			html += "</tbody>" + "</table>";
			$("#content").html(html);

			var footer_html = "";
			footer_html = "<ul class='pagination font1'>"
					+ "<li><a onclick=\"javascript:onloadPage("
					+ (result.pageNo % showLimit == 0 ? result.pageNo - 5
							: (parseInt(result.pageNo / showLimit)) * 5)
					+ ",0," + result.pagesSize + ")\">&laquo;</a></li>";

			//var index = ((parseInt(result.pageNo/showLimit)*5) == 0)?1:parseInt(result.pageNo/showLimit)*5;
			var index = (result.pageNo % 5 == 0) ? result.pageNo - 4
					: parseInt(result.pageNo / showLimit) * 5 + 1;
			var len = index + showLimit - 1 >= result.pagesSize ? result.pagesSize
					: index + showLimit - 1;
			//alert("index : " + index);
			for (; index <= len; index++) {
				footer_html += "<li><a onclick=javascript:onloadPage(" + index
						+ ",0," + result.pagesSize + ") >" + index
						+ "</a></li>";
			}

			footer_html += "<li><a onclick=\"javascript:onloadPage("
					+ (result.pageNo % showLimit == 0 ? result.pageNo + 1
							: (parseInt(result.pageNo / showLimit) + 1) * 5 + 1)
					+ ",0," + result.pagesSize + ")\">&raquo;</a></li>"
					+ "<li>&nbsp;&nbsp; 第" + result.pageNo + "页&nbsp; 共"
					+ result.pagesSize + "页 </li></ul>";
			$("#footer").html(footer_html);

		}

		function reset() {
			$("#device_no").val("");
			$("#device_time1_s").val("");
			$("#device_time2_s").val("");
			onloadPage(0, 0, 0);
		}
	</script>
</body>
</html>
